<template>
	<view class="box-fullScreenPreviewImage">
		<view :class="is_small == 'no' ? '' : 'FullSwiperVue_small'" @tap="changeShowSwiper">
			<FullSwiperVue />
		</view>

		<view class="box-funtion" v-show="show_box_funtion">
			<view class="BarBackVue">
				<BarBackVue />
			</view>

			<view :class="is_small == 'no' ? '' : 'CurrentIndexVue_small'" class="CurrentIndexVue">
				<CurrentIndexVue />
			</view>
			<view v-if="is_small == 'no'" class="DateTimeVue">
				<DateTimeVue />
			</view>

			<view :class="is_small == 'no' ? 'ImgDescVue' : 'ImgDescVue_small'">
				<ImgDescVue :ref_PopupDescVue="ref_PopupDescVue" />
			</view>

			<view :class="is_small == 'no' ? '' : 'BottomFunVue_small'" class="BottomFunVue">
				<BottomFunVue
					:rate="current_image_data.value.rate"
					:ref_PopupDescVue="ref_PopupDescVue"
					:ref_PopupRateVue="ref_PopupRateVue"
				/>
			</view>
		</view>
		<PopupDescVue ref="ref_PopupDescVue" :image_data="current_image_data.value" />
		<PopupRateVue ref="ref_PopupRateVue" />
	</view>
</template>

<!-- 需路由传递preview_index、total -->
<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { onMounted, provide, reactive, ref } from 'vue'

import { get_image_data_by_id } from '../../api'

import FullSwiperVue from './components/FullSwiper.vue'
import CurrentIndexVue from './components/CurrentIndex.vue'
import DateTimeVue from './components/DateTime.vue'
import ImgDescVue from './components/ImgDesc.vue'
import BottomFunVue from './components/BottomFun.vue'
import BarBackVue from './components/BarBack.vue'
import PopupDescVue from './components/PopupDesc.vue'
import PopupRateVue from './components/PopupRate.vue'

const ref_PopupDescVue = ref()
const ref_PopupRateVue = ref()
const show_box_funtion = ref(true)
// 使用字符串不用Boolean，因为在路由中传参是字符串。Boolean('false') 等同 ture，会参生歧义
// is_small = yes or no
const is_small = ref('no')

const current_item_index = ref(null)

const current_image_data = reactive({
	value: {
		author: '',
		category: null,
		create_time: '',
		description: '',
		id: null,
		name: '',
		rate: null,
		tag: '',
		url: ''
	}
})

onLoad((obj) => {
	current_item_index.value = Number(obj.index)
	is_small.value = obj.is_small
})

const changeShowSwiper = function () {
	if (is_small.value == 'no') show_box_funtion.value = !show_box_funtion.value
}

provide('current_image_data', current_image_data)
provide('current_item_index', current_item_index)
</script>

<style lang="scss" scoped>
.box-fullScreenPreviewImage {
	width: 100vw;
	height: 100vh;
	overflow: hidden;

	.FullSwiperVue_small {
		width: 100vw;
		height: 100vw;
		margin-top: 50vh;
		transform: translateY(-50%);
	}

	.box-funtion {
		font-size: 32rpx;
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0%;
		left: 0%;
		color: white;

		@extend .f-c-c-n;
		flex-direction: column;
		justify-content: start;

		pointer-events: none;

		.ImgDescVue,
		.BottomFunVue,
		.BarBackVue {
			pointer-events: auto;
		}

		.CurrentIndexVue {
			margin-top: 10vh;
		}
		.CurrentIndexVue_small {
			margin-top: calc(50vh - 58vw);
		}

		.ImgDescVue {
			max-width: 70vw;
			margin-top: 52vh;
			margin-bottom: 5vw;
		}
		.ImgDescVue_small {
			// margin: auto;
			// max-width: 70vw;
			margin-top: 110vw;
			margin-bottom: 5vw;
		}

		.BottomFunVue {
			width: 600rpx;
		}
		.BottomFunVue_small {
			// background-color: rgba(241, 161, 162, 1);
			// border-radius: 100rpx;
		}
	}
}
</style>
